<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="layouts::header">
    <!--必要的标签-->

</head>
<body>
<nav th:replace="layouts::navbar"></nav>

<div class="container">
    <h3>主面板</h3>
   <p th:text="${versionNumber}"></p>
    <hr>
    <div class="row">
        <div class="col-md-6">
<h4>当前项目</h4>
<table class="table table-bordered table-striped">
    <thead class="thead-dark">
    <tr>
    <th>项目名称</th>
        <th>项目状态</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="aProject :${projects}"> <!--迭代值  迭代变量-->
        <td th:text="${aProject.name}"></td>
        <td th:text="${aProject.stage}"></td>
    </tr>
    </tbody>
</table>
        </div>
        <div class="col-md-4">

            <canvas id="myPieChart" height="50" width="50"></canvas>
           <script>
               let chartData = "[[${projectStatusData}]]"
           </script>

        </div>
</div>


        <h4>当前学生</h4>
    <div class="row">
        <div class="col-md-6">
    <table class="table table-bordered table-striped">
        <thead class="thead-dark">
        <tr>
            <th>学生姓名</th>
            <th>微信号</th>
            <th>项目个数</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="aStudent :${studentProjects}"> <!--迭代值  迭代变量-->
            <td th:text="${aStudent.name}"></td>
            <td th:text="${aStudent.wechatId}"></td>
            <td th:text="${aStudent.projectCount}"></td>
        </tr>
        </tbody>
    </table>
</div>
    </div>


<!--    <div class="col-md-4">-->
<!--<canvas id="myPieChart" height="50" width="50">-->

<!--</canvas>-->

    </div>
</div>

</div>

<script type="text/javascript" th:src="@{js/myChart.js}">

</script>
</body>
</html>